<template>
    <van-nav-bar class="app-header">
      <template #left>
        <router-link to="/city">城市</router-link>
      </template>
      <template #title>
        <router-link to="/search">点击搜索</router-link>
      </template>
      <template #right>
        <router-link to="/login" v-if="!token">登录</router-link>
        <router-link to="/user" v-else>我的</router-link>
      </template>
    </van-nav-bar>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from "vue";
  import type { Ref } from "vue";
  import { useUserInfoStore } from "@/stores/userInfo";

  const token: Ref<string> = ref("");
  const store = useUserInfoStore();
  
  onMounted(() => {
    if (!token.value && localStorage.getItem("userToken")) {
      store.userToken = localStorage.getItem("userToken") as string;
      token.value = store.getUserToken;
    }
  });
  
  </script>
  
  <style lang="scss" scoped>
  .app-header {
    background-color: #e4253e;
    ::v-deep .van-nav-bar__content {
      font-weight: bold;
      .van-nav-bar__left,
      .van-nav-bar__right {
        a {
          color: #fff;
        }
      }
      .van-nav-bar__title {
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        flex: 1;
        border-radius: 60px;
        text-align: left;
        padding-left: 20px;
        font-size: 14px;
        a {
          color: #222;
        }
      }
    }
  }
  </style>
  